<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';

import { computed, h, ref } from 'vue';

import { useVbenForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { Input } from 'ant-design-vue';

import { getCaptChaImage } from '#/api';

// import type { VbenFormSchema } from '@vben/common-ui';
// import type { Recordable } from '@vben/types';

// import { computed, h, ref } from 'vue';

// import { AuthenticationRegister, z } from '@vben/common-ui';
// import { $t } from '@vben/locales';

// import { getCaptChaImage } from '#/api';

// defineOptions({ name: 'Register' });

defineOptions({ name: 'Register' });

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        // placeholder: $t('authentication.usernameTip'),
        placeholder: $t('auth.register.form.username.placeholder'),
      },
      fieldName: 'username',
      // label: $t('authentication.username'),
      label: $t('auth.register.form.username.label'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        passwordStrength: true,
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      renderComponentContent() {
        return {
          strengthText: () => $t('authentication.passwordStrength'),
        };
      },
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.confirmPassword'),
      },
      dependencies: {
        rules(values) {
          const { password } = values;
          return z
            .string({ required_error: $t('authentication.passwordTip') })
            .min(1, { message: $t('authentication.passwordTip') })
            .refine((value) => value === password, {
              message: $t('authentication.confirmPasswordTip'),
            });
        },
        triggerFields: ['password'],
      },
      fieldName: 'confirmPassword',
      label: $t('authentication.confirmPassword'),
    },
    {
      component: '',
      fieldName: 'code',
    },
    {
      component: 'VbenCheckbox',
      fieldName: 'agreePolicy',
      renderComponentContent: () => ({
        default: () =>
          h('span', [
            $t('authentication.agree'),
            h(
              'a',
              {
                class: 'vben-link ml-1 ',
                href: '',
              },
              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
            ),
          ]),
      }),
      rules: z.boolean().refine((value) => !!value, {
        message: $t('authentication.agreeTip'),
      }),
    },
  ];
});
const [Form] = useVbenForm({
  commonConfig: {
    hideLabel: false,
  },
  schema: formSchema.value,
  actionWrapperClass: 'flex justify-between gap-2',
  submitButtonOptions: { class: 'w-[50%] ml-0' },
  resetButtonOptions: { class: 'w-[50%] ml-0' },
  handleSubmit(res) {
    console.warn(res);
  },
});

const captcha = ref('');
getCaptChaImage()
  .then((res) => {
    console.warn(res);
  })
  .catch((error) => {
    console.warn(error);
    captcha.value = `data:image/;base64,${error.img}`;
  });

// const loading = ref(false);

// const formSchema = computed((): VbenFormSchema[] => {
//   return [
//     {
//       component: 'VbenInput',
//       componentProps: {
//         // placeholder: $t('authentication.usernameTip'),
//         placeholder: $t('auth.register.form.username.placeholder'),
//       },
//       fieldName: 'username',
//       // label: $t('authentication.username'),
//       label: $t('auth.register.form.username.label'),
//       rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
//     },
//     {
//       component: 'VbenInputPassword',
//       componentProps: {
//         passwordStrength: true,
//         placeholder: $t('authentication.password'),
//       },
//       fieldName: 'password',
//       label: $t('authentication.password'),
//       renderComponentContent() {
//         return {
//           strengthText: () => $t('authentication.passwordStrength'),
//         };
//       },
//       rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
//     },
//     {
//       component: 'VbenInputPassword',
//       componentProps: {
//         placeholder: $t('authentication.confirmPassword'),
//       },
//       dependencies: {
//         rules(values) {
//           const { password } = values;
//           return z
//             .string({ required_error: $t('authentication.passwordTip') })
//             .min(1, { message: $t('authentication.passwordTip') })
//             .refine((value) => value === password, {
//               message: $t('authentication.confirmPasswordTip'),
//             });
//         },
//         triggerFields: ['password'],
//       },
//       fieldName: 'confirmPassword',
//       label: $t('authentication.confirmPassword'),
//     },
//     {
//       component: 'VbenPinInput',
//       componentProps: {
//         placeholder: '请输入验证码',
//       },
//       fieldName: 'code',
//     },
//     {
//       component: 'VbenCheckbox',
//       fieldName: 'agreePolicy',
//       renderComponentContent: () => ({
//         default: () =>
//           h('span', [
//             $t('authentication.agree'),
//             h(
//               'a',
//               {
//                 class: 'vben-link ml-1 ',
//                 href: '',
//               },
//               `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
//             ),
//           ]),
//       }),
//       rules: z.boolean().refine((value) => !!value, {
//         message: $t('authentication.agreeTip'),
//       }),
//     },
//   ];
// });

// function handleSubmit(value: Recordable<any>) {
//   // eslint-disable-next-line no-console
//   console.log('register submit:', value);
// }
</script>

<template>
  <Form>
    <template #code>
      <div class="flex w-full justify-between gap-2">
        <Input />
        <img :src="captcha" />
      </div>
    </template>
  </Form>

  <!-- <div>
    <h1>图片</h1>
    <img :src="captcha" alt="" />
  </div>
  <AuthenticationRegister
    :form-schema="formSchema"
    :loading="loading"
    @submit="handleSubmit"
  >
    <template #code>
      <div>code</div>
    </template>
  </AuthenticationRegister> -->
</template>
